<template>
  <div v-if="show" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl p-8 max-w-2xl w-full mx-4 shadow-xl border border-gray-200">
      <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
        <i class="fas fa-box-open text-green-500 mr-3"></i>发布包裹
      </h3>
      <form @submit.prevent="handleSubmit">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

          <!-- 收件人 -->
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>收件人
            </label>
            <div class="relative">
              <i class="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input v-model="formData.receiver" type="text"
                     class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent"
                     placeholder="请输入收件人姓名">
            </div>
          </div>

          <!-- 联系电话 -->
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>联系电话
            </label>
            <div class="relative">
              <i class="fas fa-phone absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input v-model="formData.phone" type="tel"
                     class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent"
                     placeholder="请输入联系电话">
            </div>
          </div>

          <!-- 地址 -->
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>地址
            </label>
            <div class="relative">
              <i class="fas fa-map-marker-alt absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input v-model="formData.address" type="text"
                     class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent"
                     placeholder="省/市/区">
            </div>
          </div>

          <!-- 详细地址 -->
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>详细地址
            </label>
            <div class="relative">
              <i class="fas fa-home absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input v-model="formData.detailAddress" type="text"
                     class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent"
                     placeholder="街道、小区、门牌号">
            </div>
          </div>

          <!-- 取件码 -->
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>取件码
            </label>
            <div class="relative">
              <i class="fas fa-barcode absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input v-model="formData.trackingNumber" type="text"
                     class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent"
                     placeholder="请输入取件码">
            </div>
          </div>

          <!-- 物品描述 -->
          <div >
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>物品描述
            </label>
            <div class="relative">
              <i class="fas fa-box absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <select v-model="formData.description"
                      class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent appearance-none">
                <option value="" disabled>请选择物品类型</option>
                <option value="电子产品">电子产品</option>
                <option value="水果">水果</option>
                <option value="零食">零食</option>
                <option value="服装">服装</option>
                <option value="其他">其他</option>
              </select>
            </div>
          </div>

          <!-- 备注 -->
          <div class="md:col-span-2">
            <label class="block text-gray-700 text-sm font-medium mb-2 flex items-center">
              <i class=" text-gray-500 mr-2"></i>备注
            </label>
            <div class="relative">
              <i class="fas fa-comment absolute left-3 top-4 text-gray-400"></i>
              <textarea v-model="formData.remark" rows="3"
                        class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-transparent"
                        placeholder="请输入备注信息"></textarea>
            </div>
          </div>
        </div>

        <!-- 按钮组 -->
        <div class="mt-8 flex justify-end space-x-4">
          <button @click="close" type="button"
                  class="px-6 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
            <i class="fas fa-times mr-2"></i>取消
          </button>
          <button @Click="handleSubmit" type="submit"
                  class="px-6 py-2 bg-green-400 text-white rounded-lg hover:bg-green-500 flex items-center">
            <i class="fas fa-paper-plane mr-2"></i>发布
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "PublishParcelModal",
  props: {
    show: Boolean
  },
  data() {
    return {
      formData: {
        trackingNumber: "",
        receiver: "",
        description: "",
        phone: "",
        address: "",
        detailAddress: "",
        remark: ""
      }
    };
  },
  methods: {

    close() {
      this.$emit("close");
    },

    handleSubmit() {
      console.log("发布包裹:", this.formData);

      const newParcel = {
        trackingNumber: this.formData.trackingNumber,
        receiver: {
          name: this.formData.receiver,
          contact: this.formData.phone
        },
        description: this.formData.description,
        phone: this.formData.phone,
        status: "待接单",
        createdAt: new Date().toLocaleString(),
        location: `${this.formData.address} ${this.formData.detailAddress}`,
        deliveryPerson: "",
        remark: this.formData.remark
      };

      this.close();
      alert("包裹发布成功！");
    }
  }
};
</script>

<style scoped>
/* 保留原有样式 */
</style>